<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>商品详情</span>
        </div>
      </template>
      <div class="info">
        <div class="imgs">
          <el-image
            :src="item.img"
            fit="contain"
            style="width: 300px; height: 360px"
          />
        </div>
        <div class="word">
          <div class="name">商品型号：{{ item.name }}</div>
          <div class="price">商品价格：{{ item.price }}</div>
          <div class="stock">剩余数量：{{ item.stock }}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { useRoute } from "vue-router";
import { ref, onMounted } from "vue";
import request from "../utils/request";
const route = useRoute();
const item = ref({});
function getdel() {
  request.get("/goods/" + route.query.id).then((res) => {
    item.value = res.data;
  });
}

onMounted(() => {
  getdel();
});
</script>

<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box-card {
  width: 600px;
  margin: 0 auto;
}
.info {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.name {
  font-size: 28px;
  font-weight: bold;
}
.price {
  color: rgb(238, 86, 65);
  font-size: 16px;
  font-weight: 600;
  margin: 40px 0;
}
.stock {
  font-size: 16px;
}
</style>
